<template>
  <nly-content-wrapper>
    <nly-content-header>
      <nly-container fluid>
        <nly-row class="ml-1 mb-2 lr">
          <nly-col
            xs="12"
            sm="12"
            md="12"
            lg="9"
            xl="9"
            class="form-inline"
            style="justify-content: left;"
          >
            <!-- <form-input
              name="name"
              title="登录账号"
              id="name"
              labelStyle
              rightStyle="width:120px;"
              class="ml-2"
              v-model="postData.userName"
            ></form-input>-->
            <form-input
              name="name"
              title="用户姓名"
              id="name"
              labelStyle
              rightStyle="width:120px;"
              class="ml-2"
              v-model="postData.realName"
            ></form-input>
            <div style="margin-left: 20px;padding-right: 20px;">状态：</div>
            <a-select default-value="0" style="width: 120px" v-model="postData.status">
              <a-select-option value>全部</a-select-option>
              <a-select-option value="0">已提现</a-select-option>
              <a-select-option value="4">待打款</a-select-option>
              <a-select-option value="5">待到账</a-select-option>
            </a-select>
          </nly-col>

          <nly-col
            xs="12"
            sm="12"
            md="12"
            lg="3"
            xl="3"
            class="form-inline align-self-start"
            style="justify-content: right;"
          >
            <nly-button-group>
              <nly-button
                size="sm"
                variant="info"
                @click="getWithdrawalRecord"
                button-class="mr-2"
              >查询</nly-button>
            </nly-button-group>
          </nly-col>
        </nly-row>
      </nly-container>
    </nly-content-header>
    <nly-content>
      <!-- user table列表 -->
      <a-table
        :columns="columns"
        :data-source="data"
        bordered
        :pagination="pagination"
        @change="onTableChange"
      ></a-table>
      <a-modal v-model="statusVisible" title="修改提现状态" centered>
        <a-select v-model="status" style="width: 220px">
          <a-select-option value="0">已提现</a-select-option>
          <a-select-option value="4">待打款</a-select-option>
          <a-select-option value="5">待到账</a-select-option>
        </a-select>
        <template slot="footer">
          <a-button key="submit" type="primary" @click="updateStatus">保存</a-button>
          <a-button key="back" @click="() => (statusVisible = false)">取消</a-button>
        </template>
      </a-modal>
    </nly-content>
  </nly-content-wrapper>
</template>

<script>
import { FormInput, EditableCell } from "@/components/Form";
import { withdrawalRecord, updateWithdrawalStatus } from "@/api/personal/userInfo";

export default {
  data() {
    const columns = [
      {
        title: "用户姓名",
        dataIndex: "userName",
        key: "userName",
        width: 120
      },
      {
        title: "提现金额",
        dataIndex: "amount",
        key: "amount",
        width: 120
      },
      {
        title: "提现银行",
        dataIndex: "bankName",
        key: "bankName",
        width: 120
      },
      {
        title: "银行卡号",
        dataIndex: "bankAccount",
        key: "bankAccount",
        width: 120
      },
      {
        title: "状态",
        dataIndex: "status",
        key: "status",
        width: 120,
        customRender: (text, row, index) => {
          const status = [
            "已提现",
            "待审核",
            "审核中",
            "审核驳回",
            "待打款",
            "待到账"
          ];
          return status[text];
        }
      },
      {
        title: "提现时间",
        dataIndex: "createDate",
        key: "createDate",
        width: 120
      },
      {
        title: "操作",
        dataIndex: "id",
        key: "id",
        width: 120,
        customRender: (text, row, index) => {
          return (
            <div class="icons-list">
              <a
                href="javascript:;"
                title="修改状态"
                class="mr-1"
                onClick={() => (this.statusVisible = true, this.id = row.id)}
              >
                <a-icon type="edit" theme="twoTone" />
              </a>
            </div>
          );
        }
      }
    ];

    return {
      id: 0,  
      status: "0",  
      data: [],
      columns,
      statusVisible: false,
      postData: {
        "current": 1,
        "size": 20,
        userName: "",
        status: ""
      },
      pagination: {
        defaultPageSize: 20,
        current: 1,
        pageSize: 20,
        total: 0,
        showTotal: total => {
          return (
            <div>
              共 {total} 条数据，每页
              <a-input-number
                value={this.pagination.pageSize}
                min={1}
                max={500}
                onPressEnter={e => this.changePageSize(e)}
              />
              条
            </div>
          );
        },
        showQuickJumper: true,
        showLessItems: true
      }
    };
  },
  mounted() {
    this.getWithdrawalRecord();
  },
  methods: {
    //提现记录
    getWithdrawalRecord() {
      withdrawalRecord(this.postData).then(response => {
        if (response.code == 200) {
          const { data } = response;
          const { records, total, current, size } = data;
          this.data = records;
          Object.assign(this.pagination, {
            total
          });
        }
      });
    },
    //修改提现状态
    updateStatus() {
      console.log(this.id, this.status);
      updateWithdrawalStatus({id: this.id, status: this.status}).then(response => {
        if(response.code == 200) {
           this.$message.success("修改成功");
           this.getWithdrawalRecord();
           this.statusVisible = false;
        }
      });  
    },
    //分页
    changePageSize(e) {
      const value = e.target.value;
      const { pagination } = this;

      console.log(e, value);
      Object.assign(this.postData, {
        "size": value
      });
      Object.assign(this.pagination, {
        pageSize: Number.parseInt(value)
      });
      this.getWithdrawalRecord();
    },
    onTableChange(pagination, filters, sorter) {
      Object.assign(this.postData, {
        "current": pagination.current,
        "size": pagination.pageSize
      });
      Object.assign(this.pagination, {
        current: pagination.current,
        pageSize: pagination.pageSize
      });
      this.getWithdrawalRecord();
    }
  }
};
</script>